<script setup>
import {onMounted} from 'vue'
import {
  NAvatar,
  NButton,
  NFlex,
  NForm,
  NFormItem,
  NImage,
  NInput,
  NSelect,
  NTabPane,
  NTabs,
  NTag,
  useMessage
} from 'naive-ui'

import CommonPage from '@/components/page/CommonPage.vue'
import api from '@/api'
import default_image from "@/assets/images/mz.jpg";
import {getToken, renderIcon} from "@/utils";
import TheIcon from "@/components/icon/TheIcon.vue";
import {useCRUD} from "@/composables";
import CrudModal from "@/components/table/CrudModal.vue";
const base_path = import.meta.env.VITE_BASE
const message = useMessage()
const {
  modalVisible,
  modalAction,
  modalTitle,
  modalLoading,
  handleAdd,
  handleDelete,
  handleEdit,
  handleSave,
  modalForm,
  modalFormRef,
} = useCRUD({
  name: '健康顾问',
  initForm: {},
  doCreate: api.createInterviews,
  doDelete: api.deleteInterviews,
  doUpdate: api.updateInterviews,
  refresh: () => on_ref(),
})

const props = defineProps({
  infoData: {
    type: Object,
    required: true
  }
});
const data = reactive({
    orders:[],
    card_loading:false,
    select_customer:{
    name:"未选择",
    card_number:"--",
    user_level_name:"--",
    mobile:"--",
    bi_date:"--",
    sex:"--",
    hkqd:"--",
    age:"--",
    created_at:"--",
    last_come:"--",
    record_hobby:[],
    totals:{
    weimei:0,
    cdp:0,
    fujia:0,
    other:0,
    buy_money:0,
    cases:0,
    appoint_count:0,
    return_count:0,
    operation_count:0,
    face_count:0,
    test_count:0,
    having_customers:0,
    customers_level5:0

    }
    },
    tab_goods:[],
    meeting_users:[],
    config:[],
    uploadAction: base_path+'/system/base/userimg',
    token: getToken(),
    pay:false,
    pay_data:[],
    payForm: {
      id:0,
      order_id:0,
      pay_type:3,
      images:[],
      images_pc:[]
    },
    get_jf_data:[],
    fjq:[],
    keyword:""
});

onMounted(() => {
  data.select_customer = props.infoData
  get_config()
  on_ref()
})

function get_config() {
  api.getConfig().then((res) => {
    data.departments = res.data.categorys
    data.rooms = res.data.rooms
    data.consult_method = res.data.consult_method
  })
  api.getUserList({
    type: 2
  }).then((res) => {
    data.doctors = res.data
  })
  api.getUserList({
    type: 3
  }).then((res) => {
    data.advisers = res.data
  })
  api.getDeviceList().then((res) => {
    data.devices = res.data
  })

  api.getProjectsAllTree().then((res) => (data.projects = res.data))
}


function on_ref(){
  get_order_list()
}

function get_order_list(){
  data.card_loading = true
  api.getInterviews({
    user_id:data.select_customer.user_id,
    keyword:data.keyword
  }).then((res) => {
     data.orders = res.data.items
     data.card_loading = false
     data.loading = false
  })
}

const handleFinish = ({ file, event }) => {
  let data = (event?.target).response
  data = JSON.parse(data)
  if (data.code === 200) {
    file.url = data.data.url
    message.success('上传成功')
  } else {
    message.error(data.data)
  }

  return file
}


function go_cancel(item){
  api.deleteInterviews({
    id:item.id,
  }).then((res) => {
    message.success('作废成功')
    on_ref()
  })
}

function search_order(){
  data.loading = true
  get_order_list()
}


function save_interview(){
  handleSave()
}

function del_interview(){
  handleDelete()
}

// function go_print(item){
//   api.printCases({
//     id:item.id,
//   }).then((res) => {
//     message.success('打印成功')
//     on_ref()
//   })
// }

function add_case(){
  handleAdd()
  modalForm.value.user_id = data.select_customer.user_id
  modalForm.value.address_id = 1 // 杭州店
  modalForm.value.type = 88
}



</script>
<template>
  <div class="container" style="height: calc(100vh - 106px);">
    <div class="search">
      <NInput size="large"  @change="search_order" v-model:value="data.keyword"  :loading="data.loading" clearable type="text" placeholder="请输入卡项,项目名称检索"/>
    </div>
     <n-spin :show="data.card_loading" style="--n-opacity-spinning:0.1;height: calc(100vh - 225px);">
       <n-scrollbar v-if="data.orders.length>0" style="max-height: calc(100vh - 180px);padding:0 20px 20px 0px">
          <n-collapse  class="cards" accordion :trigger-areas="['main']" :default-expanded-names="data.orders[0].id">
        <n-collapse-item :name="item.id" v-for="item in data.orders" class="card" >
          <template #header>
              <div style="display: flex; align-items: center;justify-content: flex-start">
                <n-h6 prefix="bar" type="info" style="margin: 0;font-size: 16px">
                  <div style="display: flex">
                    <img style="width: 40px;height: 40px;border-radius: 50%;"
                         :src="item.user_avatar">
                    <div style="height:40px;line-height:20px;margin-left: 10px">
                <span style="margin-right: 5px">
                  {{item.user_name}}
                </span>
                      <br>
                      <span style="font-size: 12px;color:#747586">诊疗时间:{{ item.created_at }}</span>
                    </div>
                  </div>
                </n-h6>
              </div>
            </template>

          <div class="project_list">
            <div style="display: flex;gap: 10px;flex-wrap: wrap; align-content: space-between;">
                <n-card size="small" style="width: 260px;" :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header><n-h6 prefix="bar" style="margin: 0;font-size: 14px">咨询项目</n-h6></template>
                  <template #footer>
                    <div>
                      {{item.consult_project_format}}
                    </div>
                  </template>
                </n-card>
                <n-card size="small" style="width: 260px;" :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header><n-h6 prefix="bar" style="margin: 0;font-size: 14px">诊疗科室</n-h6></template>
                  <template #footer>
                    <div>
                      {{item.consult_category_format}}
                    </div>
                  </template>
                </n-card>
                <n-card size="small" style="width: 260px;" :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header><n-h6 prefix="bar" style="margin: 0;font-size: 14px">咨询方式</n-h6></template>
                  <template #footer>
                    <div>
                      {{item.consult_method}}
                    </div>
                  </template>
                </n-card>

                <n-card size="small" style="width: 260px;" :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header><n-h6 prefix="bar" style="margin: 0;font-size: 14px">潜在项目</n-h6></template>
                  <template #footer>
                    <div>
                      {{item.latent_project_format}}
                    </div>
                  </template>
                </n-card>
                <n-card size="small" style="width: 260px;" :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header><n-h6 prefix="bar" style="margin: 0;font-size: 14px">推荐项目</n-h6></template>
                  <template #footer>
                    <div>
                      {{item.recommend_project_format}}
                    </div>
                  </template>
                </n-card>
                <n-card size="small" style="width: 260px;" :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header><n-h6 prefix="bar" style="margin: 0;font-size: 14px">诊疗医生</n-h6></template>
                  <template #footer>
                    <div>
                      {{item.doctor_name}}
                    </div>
                  </template>
                </n-card>
                <n-card size="small" style="width: 260px;" :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header><n-h6 prefix="bar" style="margin: 0;font-size: 14px">诊疗时间</n-h6></template>
                  <template #footer>
                    <div>
                      {{item.created_at}}
                    </div>
                  </template>
                </n-card>

                <n-card size="small" style="width: 260px;" :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header>
                    <n-h6 prefix="bar" style="margin: 0;font-size: 14px">项目备注</n-h6>
                  </template>
                  <template #footer>
                    <div>
                      {{item.project_remark	}}
                    </div>
                  </template>
                </n-card>
                <n-card size="small" style="width: 260px;" :bordered="false" hoverable content-style="padding: 0px;" :segmented="{content: true,footer: 'soft',}">
                  <template #header><n-h6 prefix="bar" style="margin: 0;font-size: 14px">诊疗备注</n-h6></template>
                  <template #footer>
                    <div>
                      {{item.remark}}
                    </div>
                  </template>
                </n-card>
            </div>
            <div style="margin-top: 10px">
              <n-popconfirm @positive-click="go_cancel(item)">
                <template #trigger>
                   <n-button  type="error" style="margin-right:10px">
                     <TheIcon icon="material-symbols:delete" :size="16" class="mr-5" />作废</n-button>
                </template>
                确定要作废该诊疗吗？
              </n-popconfirm>
            </div>
          </div>
        </n-collapse-item>
      </n-collapse>
      </n-scrollbar>
       <n-empty v-else description="暂无数据"  style="margin: 50px"></n-empty>
     </n-spin>
    <div class="add_cases">
      <NFlex style="align-items: center;" justify="end">
        <n-button type="primary" style="width: 100px;margin-right: 30px" @click="add_case">
          <TheIcon icon="material-symbols:add" :size="16" class="mr-5" />
          添加
        </n-button>
      </NFlex>
    </div>
    <n-drawer v-model:show="modalVisible" width="400px">
      <n-drawer-content title="诊疗记录" closable>
        <NForm
        ref="modalFormRef"
        label-placement="left"
        label-align="left"
        :label-width="80"
        :model="modalForm"
      >
          <NFormItem label="咨询科室" path="consult_category">
            <NSelect
              v-model:value="modalForm.consult_category"
              :options="data.departments"
              placeholder="咨询科室"
              filterable
              label-field="name"
              value-field="id"
              style="width: 100%"
              remote
              clearable
            />
          </NFormItem>
          <NFormItem label="咨询项目" path="consult_project">
            <n-cascader style="width: 300px;" v-model:value="modalForm.consult_project"
              clearable
              placeholder="请选择项目"
              :options="data.projects"
              cascade
              check-strategy="children"
              show-path
              filterable
              clear-filter-after-select
              label-field="name"
              value-field="id"
            />
          </NFormItem>
          <NFormItem label="诊疗医生" path="doctor_id">
            <NSelect
                v-model:value="modalForm.doctor_id"
                :options="data.doctors"
                placeholder="选择医生"
                filterable
                label-field="name"
                value-field="id"
                style="width: 100%"
              />
          </NFormItem>
          <NFormItem label="诊疗时间" path="created_at">
            <n-date-picker
              v-model:formatted-value="modalForm.created_at"
              type="datetime"
              clearable
              placeholder="请输入诊疗时间"
              style="width: 100%"
            />
          </NFormItem>
          <NFormItem label="咨询方式" path="consult_method">
            <NSelect
                v-model:value="modalForm.consult_method"
                :options="data.consult_method"
                placeholder="选择咨询方式"
                filterable
                label-field="name"
                value-field="id"
                style="width: 100%"
              />
          </NFormItem>
          <NFormItem label="项目备注" path="project_remark">
            <n-input type="text"  v-model:value="modalForm.project_remark" placeholder="项目备注"/>
          </NFormItem>
          <NFormItem label="潜在项目" path="latent_project">
            <n-cascader style="width: 300px;" v-model:value="modalForm.latent_project"
              clearable
              placeholder="请选择项目"
              :options="data.projects"
              cascade
              check-strategy="children"
              show-path
              filterable
              clear-filter-after-select
              label-field="name"
              value-field="id"
            />
          </NFormItem>
          <NFormItem label="推荐项目" path="recommend_project">
            <n-cascader style="width: 300px;" v-model:value="modalForm.recommend_project"
              clearable
              placeholder="请选择项目"
              :options="data.projects"
              cascade
              check-strategy="children"
              show-path
              filterable
              clear-filter-after-select
              label-field="name"
              value-field="id"
            />
          </NFormItem>
          <NFormItem label="诊疗备注" path="remark">
            <n-input type="text" v-model:value="modalForm.remark" placeholder="请输入诊疗备注"/>
          </NFormItem>
          <NFormItem label="诊疗图片" path="images">
            <NUpload :action="data.uploadAction" :headers="{ authorization: data.token }" multiple list-type="image-card"
                     @finish="handleFinish" v-model:file-list="modalForm.images">
            </NUpload>
          </NFormItem>

        </NForm>
         <template #footer>
        <n-button type="primary"  @click="save_interview">
          <TheIcon icon="material-symbols:save-sharp" :size="16" class="mr-5" />保存</n-button>
           <n-popconfirm @positive-click="del_interview" v-if="modalForm.id>0">
        <template #trigger>
          <n-button type="error"   style="margin-left:10px">
            <TheIcon icon="material-symbols:contract-delete" :size="16" class="mr-5"/>
            删除
          </n-button>
        </template>
        确定要删除吗？
      </n-popconfirm>
      </template>

      </n-drawer-content>


    </n-drawer>
  </div>



</template>


<style>
 .container{
   padding: 10px;
   position: relative;
   height:100%;
   .search{
     margin-bottom: 10px;
   }
 }
 .cards{
   margin:0px;
 }
 .project{margin-bottom: 10px;}
 .project_list{
   background: #f3f3f3;
   padding: 20px;
   border-radius: 5px;

 }
 .add_cases{
   height:60px;
   position: absolute;
   bottom: 0;
   background: #eee;
   width: 100%;
   padding: 10px;
   border-top-left-radius: 5px;
 }


</style>
<style scoped>

</style>